<template>
	<view>
		<view class="container">
			<view class="comment-box">
				<view class="comment-item flex flex-align-start mb50" v-for="(item,index) in commentLists" :key="item.id">
					<image class="img-head mr20" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="flex-1 mt10">
						<view class="mb20 flex-1 fs26 col-blue">{{item.user.nickname}}</view>
						<view class="text mb20">{{item.content}}</view>
							<view class="flex-box">
								<view class="fs24 col-0 flex-1">{{item.createtime_text}}</view>
								<!-- <view class="btn-reply">回复</view> -->
							</view>
						<!-- <view class="reply-wrap p30 mt30">
							<view class="reply-item">
								<text class="reply-name fs26 col-blue">米苏1351</text>
								<text class="fs26 col-0">凝聚团队人才成就园所如何凝聚团队 人才成就园所如何凝聚团队人才。</text>
							</view>
							<view class="reply-item">
								<text class="reply-name fs26 col-blue">米苏1351</text>
								<text class="fs26 col-0">凝聚团队人才成就园所如何凝聚团队 人才成就园所如何凝聚团队人才。</text>
							</view>
						</view> -->
					</view>
					
					
				</view>
				<view class="g-btn3-wrap">
					<view class="g-btn3"  :class="{nomore: commentListsMore.nomore == true || commentListsMore.loading == true}" @click="fetch()">{{commentListsMore.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			commentLists:[],
			commentListsMore:{page:1}
		};
	},
	onLoad(){
		this.fetch();
	},
	methods: {
		fetch() {
			
		    util.fetch(this, 'xiluedu.course_comment/my_comment', {pagesize:10}, 'commentListsMore', 'commentLists', 'data', data=>{
		    
		    })
		},
	}
};
</script>

<style scoped>
.container {
	padding: 50rpx 30rpx 10rpx;
}
.comment-box .img-head {
	display: block;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.comment-box .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #000;
	line-height: 42rpx;
}
.comment-box .reply-wrap {
	background: #f4f5f7;
	line-height: 42rpx;
}
.comment-box .reply-name::after {
	content: '：';
}
.comment-box .btn-reply{
	width: 82rpx;
	height: 40rpx;
	border: 1rpx solid var(--red);
	border-radius: 20rpx;
	font-size: 24rpx;
	color: var(--red);
	text-align: center;
	line-height: 40rpx;
}
</style>
